<template>
	<Layout class="bg-white p-2 position-relative">
		<Row class="p-1">
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Input class="w-100" v-model="clientName" placeholder="请输入客户名称" />
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Input class="w-100" v-model="phone" placeholder="请输入客户电话" />
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Select class="w-100" clearable v-model="storeId" placeholder="请选择门店">
				<Option class="w-100" v-for="fStore in allStore" :value="fStore.storeId" :key="fStore.storeId">
					{{fStore.name}}</Option>
			</Select>
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Date-picker class="w-100" type="datetime" @on-change="stChange" format="yyyy-MM-dd HH:mm:ss"
				placeholder="请选择开始时间">
			</Date-picker>
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Date-picker class="w-100" type="datetime" @on-change="etChange" format="yyyy-MM-dd HH:mm:ss"
				placeholder="请选择结束时间">
			</Date-picker>
			</Col>
			<Col class="p-1" span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<radio-group class="w-100" v-model="ioFlg">
				<label
					class="ivu-radio-wrapper ivu-radio-group-item ivu-radio-wrapper-checked ivu-radio-default">出/入：</label>
				<Radio label="" @click.native.prevent="changeData('')">全部</Radio>
				<Radio label="1" @click.native.prevent="changeData('1')">进门</Radio>
				<Radio label="0" @click.native.prevent="changeData('0')">出门</Radio>
			</radio-group>
			</Col>
			<Button class="float-right m-2" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
		</Row>
		<div class="mt-1 d-xl-none">
			<Row class="bg-white border-top border-dark">

				<Col v-for="(accessRecord, index) in tableInfo.data" :xs="24" :sm="12" :md="8" :lg="8" :xl="6" :xxl="6"
					class="p-1 mt-2">
				<div class="shadow p-3 radius text-xs text-secondary">
					<div class="p-1 d-flex justify-content-between">
						<span>客户ID</span>
						<span>{{accessRecord.clientId}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>客户名称</span>
						<span>{{accessRecord.clientName}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>客户电话</span>
						<span>{{accessRecord.phone}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>门店名称</span>
						<span>{{accessRecord.name}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>设备ID</span>
						<span>{{accessRecord.uid}}</span>
					</div>

					<div class="p-1 d-flex justify-content-between">
						<span>进/出门</span>
						<span v-if="accessRecord.ioFlg">出口</span>
						<span v-else>入口</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>进/出门时间</span>
						<span>{{accessRecord.ct}}</span>
					</div>
				</div>
				</Col>
			</Row>
		</div>
		<div class="mt-1 d-none d-xl-block">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="ioFlg">
					<span v-if="row.ioFlg">进门</span>
					<span v-else>出门</span>
				</template>
				<template slot-scope="{ row, index }" slot="ct">
					{{row.ct.replace("T"," ")}}
				</template>
			</Table>
		</div>
		<div>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
	</Layout>

</template>
<script>
	export default {
		data() {
			return {
				clientName: "",
				phone:"",
				uid: "",
				name: "",
				storeId: "",
				ioFlg: "",
				st: "",
				ed: "",
				tableInfo: {
					currentInteger: 1,
					pageSize: 10,
					total: 0,
					columnInfo: [{
							title: "客户ID",
							key: "clientId",
							// width: 100
						},
						{
							title: "客户名称",
							key: "clientName",
							// width: 150
						},
						{
							title: "客户电话",
							key: "phone",
							// width: 150
						},
						{
							title: "门店名称",
							key: "name",
							// width: 150
						},
						{
							title: "设备ID",
							key: "uid",
							// width: 150
						},
						{
							title: "进/出门",
							slot: "ioFlg",
							// width: 200
						},
						{
							title: "进/出门时间",
							slot: "ct",
							// width: 200
						}
					],
					data: [],
				},
				allStore: []
			}

		},
		methods: {
			stChange: function(e) {
				this.st = e;
			},
			etChange: function(e) {
				this.ed = e;
			},
			changeData(nowValue) {
				nowValue === this.ioFlg ? this.ioFlg = "" : this.ioFlg = nowValue;
			},
			init: function() {
				this.tableInfo.currentInteger = 1;
				this.getStores();
				this.search();
			},
			searchs: function() {
				this.tableInfo.currentInteger = 1;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/store/access_record/page",
					param: {
						clientName: this.clientName,
						phone: this.phone,
						st: this.st,
						ed: this.ed,
						accessId: this.accessId,
						storeId: this.storeId,
						ioFlg: this.ioFlg,
						uId: this.uid,
						current: this.tableInfo.currentInteger,
						size: this.tableInfo.pageSize
					},
				}).then(data => {

					this.tableInfo.currentInteger = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
					console.log(data);
					let totalPage = Math.ceil(this.tableInfo.total / this.tableInfo.pageSize);
					totalPage = totalPage < 1 ? 1 : totalPage;
					if (this.tableInfo.currentInteger > totalPage) {
						this.tableInfo.currentInteger = totalPage;
						this.search();
					};
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentInteger = changedPage;
				this.search();
			},
			getStores: function() {
				this.http.get({
					url: "/store/store/info",
				}).then(data => {
					this.allStore = data;
				})
			},
		},
		created: function() {
			this.init();

		},


	}
</script>

<style scoped>
	.ivu-radio-group {
		height: 2rem;
		line-height: 2rem;
	}
</style>